<template>
  <lay-layout class="example">

    <lay-layout>
      <lay-side>
        <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys5" v-model:tree="isTree" :collapse="collapse">
    <lay-menu-item id="1">
      <router-link to="">
        <lay-icon type="layui-icon-home"></lay-icon> 
        首页
      </router-link>
    </lay-menu-item>
    <lay-sub-menu id="7">
        <template v-slot:title> 
          <router-link to="">
            <lay-icon type="layui-icon-home"></lay-icon> 
            目录
          </router-link>
        </template>
        <lay-menu-item id="8">
            <router-link to="">
              <lay-icon type="layui-icon-home"></lay-icon> 
              菜单
            </router-link>
        </lay-menu-item> 
        <lay-menu-item id="9">
            <router-link to="">
              <lay-icon type="layui-icon-home"></lay-icon> 
              菜单
            </router-link>
        </lay-menu-item>
    </lay-sub-menu> 
  </lay-menu>
      </lay-side>
      <lay-body>
        
      </lay-body>
    </lay-layout>
  </lay-layout>
</template>

<script setup>
import { ref } from 'vue';

  const isTree = ref(true)
    const selectedKey = ref("5")
    const openKeys5 = ref(["7"])
    const collapse = ref(false)
</script>
<style>

.example .layui-side {
  display: flex;
  background: #77c38c;
  /* align-items: center; */
  justify-content: center;
  color: white;
}

.example .layui-body {
  display: flex;
  background: #5FB878;
  align-items: center;
  justify-content: center;
  color: white;
}</style>